<template>
    <div>
        <headerSearch title="产品详情"></headerSearch>
        <div class="pagecontent">
            <!-- 产品图片详情 -->
            <div class="main_product_img_detail">
                <div class="img_detail">
                    <img :src="productlist.smallImg" alt="">
                </div>
                <div class="content_detail">
                    <h4>￥{{productlist.Price}}</h4>
                    <p>{{productlist.chrName}}</p>
                    <p>{{productlist.summary}}</p>
                </div>
            </div>
            <!-- 供应商 -->
            <div class="product_supplier" style="margin-bottom: 0.12rem;">
                <label for="" style="font-size: 0.28rem;color: #999;" @click="jumpCompany">供应商：<span style="font-size: 0.22rem; text-align: left;color: #333;">{{productlist.cName}}</span></label>
            </div>
            <!-- 选择产品 -->
             <div class="change_product">
                <!--
                <router-link to="" class="main_menu" style="border-bottom: 1px solid #d8d8d8;">
                    <label for="">规格选择： <span style="font-size: 0.26rem; color: #666;">选择/尺寸/大小</span></label>
                    <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
                </router-link>
                 -->
            </div>
            <!-- 圈子首页详情 -->
            <div class="circle_index_detail">
                <div class="title_text_more">
                    <h3>产品详情</h3>
                </div>
                <div class="product_desc" v-html="productlist.Attached">
                    <!-- {{productlist.Attached}} -->
                </div>
                <!-- <div class="product_detail_img">
                    <img :src="item" alt=""  v-for="(item,index) in productlist.multiImg" :key="index">
                </div> -->
            </div>
            <!-- <div style="width: 100%;">
                <Checkbox></Checkbox>
            </div> -->
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
// import Checkbox from '../components/Checkbox';
    export default {
        data() {
            return {
                productlist:[],
                id:'',
            }
        },
        mounted() {
            this.id = this.$route.query.id;
            //获取产品信息
            this.getProductInfo();
        },
        methods:{
            getProductInfo(){
                console.log(this.id);
                this.$fetch(this.$path + '/index.php/api/ProduDetail/'+this.id).then((response) => {
                    console.log('产品详情', response); 
                    if(response.code == 200) {
                        this.productlist = response.data;
                        this.productlist.Attached = this.productlist.Attached.replace(new RegExp('/userimg','g'),"http://s143.nicebox.cn/userimg");
                    }
                })
            },
            //跳转到企业主页
            jumpCompany(){
                if(this.$system != 'ios'){
                    this.$router.push({path: 'userCenter/companyIndex', query: {cp_id: this.productlist.c_id}}); 
                }else{
                    window.location.href = '/userCenter/companyIndex?cp_id=' + this.productlist.c_id;
                }  
                
            },
        },
        components: {
            headerSearch,
            // Checkbox
        },
    }
</script>

<style>

/* 富文本 */
.product_desc {
    text-align: left;
    padding: 0 0.2rem;
    font-size: 0.3rem;
    max-width: 100%;
    padding-bottom: 0.2rem;
}
.product_desc img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
}
/* .product_desc p {
    line-height: 0.46rem;
    text-align: left !important;
} */
.product_desc table {
    width: 100%;
}

/* 供应商 */
.product_supplier {
    font-size: 0.28rem;
    background-color: #fff;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: left;
    padding: 0 0.2rem;
}

/* 产品图片详情 */
.main_product_img_detail {
    background-color: #fff;
    text-align: left;
    padding-bottom: 0.2rem;
    margin-bottom: 0.12rem;
}
.main_product_img_detail .img_detail {
    width: 100%;
    height: 6rem;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
}
.main_product_img_detail .img_detail img {
    height: 6rem !important;
    max-width: 100%;
    max-height: 100%;
}
.main_product_img_detail .content_detail h4 {
    font-size: 0.36rem;
    color: #e50838;
    padding-left: 0.2rem;
    margin: 0.1rem 0 0.2rem 0;
}
.main_product_img_detail .content_detail p {
    font-size: 0.36rem;
    color: #333;
    padding-left: 0.2rem;
    line-height: 0.48rem;
}
.main_product_img_detail .content_detail p:last-child {
    font-size: 0.26rem;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 7rem;
}

/* 选择产品 */
.change_product label {
    font-size: 0.22rem !important;
    color: #999 !important;
    width: auto !important;
}
.change_product input {
    font-size: 0.26rem !important;
    color: #666 !important;
}

/* 圈子首页详情 */
.circle_index_detail {
    background-color: #fff;
}
.circle_index_detail .product_desc span {
    font-size: 0.28rem;
    color: #999;
    line-height: 0.4rem;
    display: inline-block;
    text-align: left;
    /* padding-left: 0.2rem; */
}
/* .product_detail_img img {
    width: 100%;
    height: 6rem;
    display: block;
} */
</style>